<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="../js/myQuery.js"></script> -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .buttonGroup {
            margin-top: 20px;
        }

        .active {
            background-color: #6ff;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 id="title">批量操作元素</h3>
        <div class="list">
            <li>01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li>06</li>
        </div>
    </div>
    <div class="buttonGroup">
        <button class="setHtml">
            设置html
        </button>
        <button class="getHtml">
            获取html
        </button>
        <button class="hide">隐藏</button>
        <button class="show">显示</button>
        <button class="setWidth">
            设置宽度
        </button>
        <button class="getWidth">
            获取宽度
        </button>
        <button class="setCss">css(设置)</button>
        <button class="getCss">css(获取)</button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="addClass">addClass</button>
        <button class="removeClass">removeClass</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="chain">链式操作</button>
    </div>
</body>
<script>
    // 封装一个js库,可以帮助我们快速 操作元素
    // 批量操作元素  => 修改html,text,显隐,设置宽高,设置样式,类名(增删改),绑定事件

    $(".setHtml").click(function () {
        $(".list li").html("hahahaha");
    })

    $(".setHtml").click(function () {
        alert(111111);
    })

    $(".getHtml").click(function () {
        alert($(".list li").html());
    })

    $(".hide").click(function () {
        $(".list li").hide();
    })

    $(".show").click(function () {
        $(".list li").show();
    })

    $(".setWidth").click(function () {
        // $(".list li").width("200px");
        $(".list li").width(200);
        $(".list li").height(200);
    })
    $(".getWidth").click(function () {
        alert($(".list li").width());;
        alert($(".list li").height());;
    })


    $(".setCss").click(function () {
        // $(".list li").width("200px");

        // 每次单独设置  太麻烦
        // $(".list li").css("background", "red");
        // $(".list li").css("width", "100px");
        // $(".list li").css("height", "100px");
        // $(".list li").css("text-align", "center");
        // $(".list li").css("line-height", "100px");

        // 传入一个对象作为参数  
        $(".list li").css({
            backgroundColor: "red",
            width: "100px",
            height: "100px",
            textAlign: "center",
            lineHeight: "100px",
        })
    })

    $(".getCss").click(function () {
        // $(".list li").width("200px");
        console.log($(".list li").css("backgroundColor"));
        console.log($(".list li").css("width"));
        console.log($(".list li").css("height"));
    })

    $(".attr").click(function () {
        $(".list li").attr("class", "active");
        $(".list li").attr("asd", "asd");   // 存在标签内
    })
    $(".prop").click(function () {
        $(".list li").prop("className", "active");
        $(".list li").prop("asd", "asd"); // 存在元素节点中 ele.asd
    })

    $(".addClass").click(function () {
        $(".list li").addClass("one two three");
    })

    $(".removeClass").click(function () {
        $(".list li").removeClass("one three");
    })


    $(".eq").click(function () {
        console.log($(".list li").eq(2));  //

        $(".list li").eq(2).css({ background: "red" });
    })

    $(".siblings").click(function () {
        console.log($(".list li").eq(2));  //

        $(".list li").eq(2).siblings().css({ background: "blue" });
    })

    $(".chain").click(function () {
        console.log($(".list li").eq(2));  //

        // $(".list li").eq(2).css({ background: "red" }).siblings().css({ background: "blue" });

        $(".list li").css({ textAlign: "center" }).eq(2).html("111111").width(100).height(100).addClass("active").click(function () {
            console.log(11111, this);
        }).siblings().html(22222222).width(200).height(200).removeClass("active").click(function () {
            console.log(222222, this);
        });
    })





</script>

</html>